<!--
 * @FileDescription 
 * @Author lz
 * @Date 20230222 10:32:49
 * @LastEditors lz
 * @LastEditTime 20230222 10:32:49
-->
<template>
    <div class="PopupWp" v-if="HomeContent.Default.toolrShow.value">
        <div class="content">
            <img src="/colImages/ch_close.png" class="ch_close" @click="closeBtn">
            <img src="/colImages/tit.png" class="tit">

            <div class="change_btn" @click="changeNum()">
                转化
            </div>

            <div class="label_box HeadingAngle">
                <input type="text" class="inp_l" v-model="state.horn1">
                <span class="txtName">绕X轴旋转角度</span>
                <img src="/colImages/ico_box.png" class="hexagon hl_1">
                <img src="/colImages/φ.png" class="txtIco tl_1">
            </div>

            <div class="label_box AnglePitch">
                <input type="text" class="inp_l" v-model="state.horn2">
                <span class="txtName">绕Y轴旋转角度</span>
                <img src="/colImages/ico_box.png" class="hexagon hl_1">
                <img src="/colImages/θ.png" class="txtIco tl_1">
            </div>

            <div class="label_box RollAngle">
                <input type="text" class="inp_l" v-model="state.horn3">
                <span class="txtName">绕Z轴旋转角度</span>
                <img src="/colImages/ico_box.png" class="hexagon hl_1">
                <img src="/colImages/ψ.png" class="txtIco tl_1">
            </div>

            <div class="label_box Quaternion_w">
                <input type="text" class="inp_r" v-model="state.AfterConversion[0]">
                <!-- <div class="inp_r">{{ state.AfterConversion[0] }}</div> -->
                <img src="/colImages/ico_box.png" class="hexagon hr">
                <img src="/colImages/W.png" class="txtIco tr_1">
            </div>
            <div class="label_box Quaternion_X">
                <input type="text" class="inp_r" v-model="state.AfterConversion[1]">
                <!-- <div class="inp_r">{{ state.AfterConversion[1] }}</div> -->
                <img src="/colImages/ico_box.png" class="hexagon hr">
                <img src="/colImages/X.png" class="txtIco tr_2">
            </div>
            <div class="label_box Quaternion_Y">
                <input type="text" class="inp_r" v-model="state.AfterConversion[2]">
                <!-- <div class="inp_r">{{ state.AfterConversion[2] }}</div> -->
                <img src="/colImages/ico_box.png" class="hexagon hr">
                <img src="/colImages/Y.png" class="txtIco tr_2">
            </div>
            <div class="label_box Quaternion_Z">
                <input type="text" class="inp_r" v-model="state.AfterConversion[3]">
                <!-- <div class="inp_r">{{ state.AfterConversion[3] }}</div> -->
                <img src="/colImages/ico_box.png" class="hexagon hr">
                <img src="/colImages/Z.png" class="txtIco tr_2">
            </div>

            <div class="formula">
                <p>r = π / 180</p>
                <p>W = cos(ψ*r / 2) * cos(θ*r / 2) * cos(φ*r / 2) - sin(ψ*r / 2) * sin(θ*r / 2) * sin(φ*r / 2)</p>
                <p>X = cos(θ*r / 2) * cos(φ*r / 2) * sin(ψ*r / 2) + sin(θ*r / 2) * sin(φ*r / 2) * cos(ψ*r / 2)</p>
                <p>Y = cos(ψ*r / 2) * sin(θ*r / 2) * cos(φ*r / 2) - sin(ψ*r / 2) * cos(θ*r / 2) * sin(φ*r / 2)</p>
                <p>Z = sin(φ*r / 2) * cos(ψ*r / 2) * cos(θ*r / 2) + cos(φ*r / 2) * sin(ψ*r / 2) * sin(θ*r / 2)</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
import HomeContent from '../HomeContent';
import MessageCode from '../MessageCode';
const state = reactive({
    show: false,
    horn1: 0,
    horn2: 0,
    horn3: 0,
    AfterConversion: [] as any[],
});
function closeBtn() {
    HomeContent.Default.toolrShow.value = false
}
function changeNum() {
    let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.CalibrationAdapterRequest(MessageCode.Default.MsgCodesList.EXTENSION_QUATERNION_TRANSFORM, JSON.stringify([state.horn1, state.horn2, state.horn3])))
    newArr.then((res: any) => {
        state.AfterConversion = JSON.parse(res.Content).Result
    })


}
</script>

<style scoped>
.PopupWp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1187px;
    height: 920px;
    transform: translate(-50%, -50%);
    background-image: url('/colImages/PopBg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ch_close {
    width: 77px;
    height: 77px;
    position: absolute;
    right: -8px;
    top: 8px;
}

.tit {
    width: 298px;
    height: 113px;
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translate(-50%, 0);
}

.label_box {
    position: absolute;
    width: 350px;
    height: 89px;
    line-height: 89px;
    background-image: url('/colImages/hexagon_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.HeadingAngle {
    left: 148px;
    top: 190px;
}

.AnglePitch {
    left: 90px;
    top: 290px;
}

.RollAngle {
    top: 390px;
    left: 148px;
}

.Quaternion_w {
    top: 147px;
    right: 154px;
}

.Quaternion_X {
    top: 244px;
    right: 99px;
}

.Quaternion_Y {
    top: 342px;
    right: 99px;
}

.Quaternion_Z {
    top: 441px;
    right: 152px;
}

.inp_l {
    text-align: center;
    margin-left: 45px;
    width: 100px;
    height: 30px;
    outline: none;
    border: none;
    background: rgba(51, 129, 181, 0.1);
    border: 1px solid rgba(63, 154, 211, 0.8);
    box-shadow: 0px 0px 10px 1px rgba(63, 154, 211, 0.8);
    color: #fff;
}

.inp_r {
    text-align: center;
    margin-left: 122px;
    margin-top: 28px;
    width: 186px;
    height: 30px;
    line-height: 30px;
    outline: none;
    border: none;
    background: rgba(51, 129, 181, 0.1);
    border: 1px solid rgba(63, 154, 211, 0.8);
    box-shadow: 0px 0px 10px 1px rgba(63, 154, 211, 0.8);
    color: #fff;
}

.hexagon {
    width: 99px;
    height: 89px;
    position: absolute;
}

.hl_1 {
    top: 0px;
    right: 0px;
}

.hr {
    top: 0px;
    left: 0px;
}

.txtName {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 14px;
}

.tl_1 {
    width: 31px;
    height: 37px;
    position: absolute;
    right: 34px;
    top: 29px;
}

.tr_1 {
    width: 40px;
    height: 37px;
    position: absolute;
    left: 29px;
    top: 31px;
}

.tr_2 {
    width: 29px;
    height: 31px;
    position: absolute;
    left: 34px;
    top: 32px;
}

.change_btn {
    width: 246px;
    height: 216px;
    background-image: url('/colImages/CenterButton.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 230px;
    transform: translate(-50%, 0);
    line-height: 216px;
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    color: #FFFFFF;
}

.change_btn:hover {
    color: #5cfaff;
}

.formula {
    width: 100%;
    position: absolute;
    bottom: 150px;
    text-align: center;
    color: #fff;
}

p {
    font-size: 18px;
}
</style>